<template>
  <div class="extension-list">
    <div class="el-header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/2">推广列表管理页面</el-menu-item>
      </el-menu>
    </div>

    <el-main>
      <!-- 表单区域 -->
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item prop="name" class="userId" label="用戶ID/昵称">
          <el-input class="userInput" v-model="form.name" clearable @clear="getlist"></el-input>
        </el-form-item>

        <el-form-item class="expant" label="推广收益筛选">
          <el-col class="timeStart" :span="11">
            <el-date-picker type="date" placeholder="2020-02-01" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">至</el-col>
          <el-col class="startEnd" :span="11">
            <el-date-picker type="date" placeholder="2020-02-29" v-model="form.date2" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item class="btn">
          <el-button class="btnSearch" type="primary" @click="onSubmit">查询</el-button>
          <el-button class="btnReset" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="text">
        <span class="textPeople">推广人数量：5</span>
        <span class="textStore">推广店铺总数：93</span>
      </div>

      <div class="extend">
        <el-table :data="tableData" style="width: 100%" stripe height="450">
          <el-table-column prop="userID" label="用户ID" width="215"> </el-table-column>
          <el-table-column prop="userName" label="用户昵称" width="215"> </el-table-column>
          <el-table-column prop="phone" label="推广人联系电话" width="215"> </el-table-column>
          <el-table-column prop="number" label="推广数量" width="215"> </el-table-column>
          <el-table-column prop="money" label="推广收益" width="215"> </el-table-column>
          <el-table-column label="操作" width="215">
            <el-button @click="$router.push('/extension')" type="text" size="small">推广详情</el-button>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: 'ExtensionList',
  components: {},
  props: {},
  data() {
    return {
      // 获取推广列表的参数对象
      form: {
        name: '',
        date1: '',
        date2: ''
      },
      tableData: [],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 7, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
        date2: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }]
      }
    }
  },

  computed: {},

  mounted() {},
  created() {
    this.getlist()
  },
  methods: {
    async onSubmit() {
      // this.tableData = []
      if (this.form.name) {
        const { data } = await this.$http.get(`/tableDatas?userName_like=${this.form.name}`)
        const { data: data1 } = await this.$http.get(`/tableDatas?userID_like=${this.form.name}`)
        if (data.length > 0) {
          this.tableData = data
        } else if (data1.length > 0) {
          this.tableData = data1
        }
      }
    },
    // 点击重置按钮，重置登录表单
    resetForm() {
      this.$refs.formRef.resetFields()
      this.form.date1 = ''
      this.form.date2 = ''
    },
    // handleClick(row) {
    //   console.log(row)
    // }
    async getlist() {
      const { data } = await this.$http('/tableDatas')
      this.tableData = data
    }
  },
  watch: {}
}
</script>
<style lang="less" scoped>
.extension-list {
  width: 100%;
  .el-header {
    color: #333;
    height: 70px !important;
    padding: 0;
  }
  .el-main {
    padding: 0 10px;
    .el-form {
      position: absolute;
      left: 210px;
      top: 68px;
      width: 85.5%;
      height: 120px;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border: 1px solid rgba(121, 121, 121, 1);
      border-radius: 5px;
      box-shadow: none;
      .userId {
        position: absolute;
        left: 66px;
        top: 8px;
        width: 104px;
        height: 16px;
        font-size: 14px;
        align-self: flex-start;
        padding: 0;
        box-sizing: border-box;
        .userInput {
          position: absolute;
          left: 90px;
          top: 0px;
          width: 165px;
          height: 25px;
          padding: 3px 2px 3px 2px;
        }
      }
      .expant {
        border-width: 0px;
        position: absolute;
        left: 420px;
        top: 8px;
        width: 96px;
        height: 16px;
        .timeStart {
          border-width: 0px;
          position: absolute;
          left: 100px;
          top: 4px;
          width: 175px;
          height: 25px;
          display: flex;
        }
        .line {
          border-width: 0px;
          position: absolute;
          left: 278px;
          top: 4px;
          width: 14px;
          height: 16px;
          display: flex;
        }
        .startEnd {
          border-width: 0px;
          position: absolute;
          left: 295px;
          top: 4px;
          width: 175px;
          height: 25px;
          display: flex;
        }
      }
      .btn {
        .btnSearch {
          border-width: 0px;
          position: absolute;
          left: 799px;
          top: 72px;
        }
        .btnReset {
          border-width: 0px;
          position: absolute;
          left: 886px;
          top: 72px;
          background-color: #ccc;
        }
      }
    }
    .text {
      position: absolute;
      top: 200px;
      .textPeople {
        margin: 0 60px 0 30px;
      }
    }
    .extend {
      padding: 10px;
      margin-top: 170px;
      border: 1px solid rgba(121, 121, 121, 1);
      border-radius: 5px;
      .el-tabs__item {
        width: 210px;
      }
    }
  }
}
</style>
